挑战：图片和表格元素

该任务的目的是帮助你检查对我们在本课程Images, Media and Form elements(图像，媒体及表格元素）中了解的一些值和单位的理解。

**备注：**你可以在下面的交互式编辑器中尝试解决方案，但是下载代码并使用诸如CodePen, jsFiddle, Glitch 之类的在线工具来完成任务可能会更加有所帮助。

如果你遇到了困难，可以通过沟通渠道联系我们。

](https://developer.mozilla.org/pong/click?code=aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2NsaWNrL3gvR1RORDQyN1VDWUJJS0szTkY2U0xZS1FVQ0FTSTQySllDVjdEQ1ozSkNBU0k1S0o3RlQ3SVRLSktDQTdEUDJKWUNWU0Q1MjNJQzY3RDQ1UVlDNkFJNTVRS0M2U0k1MkpOQzZZREVLM0VISk5DTFNJWg%3D%3D.nuTHQ5kC%2Bu1dKyo6ea5mbftC8Xid6RWrEAY%2Bqt%2FDGFY%3D&version=2)Ad

任务一

在此任务中，你有一张溢出盒子的图像。我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。

An image in a box

在下面的例子中看看你能否能符合上面的图片

htmlCopyPlay

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

cssCopyPlay

.box {
  border: 5px solid #000;
  width: 400px;
  height: 200px;
}

img {
  /* Add styles here */
}

Play

Click here to show the solution

It is ok if some parts of the image are cropped. Using object-fit: cover is the best choice, you also need to set the width and height to 100%:

任务二

在此任务中，你会获得一个简单的表格。你的任务是对该表单的外观进行以下更改：

使用属性选择器定位.myform 中的**搜索 (search)**字段和按钮。
使表单字段和按钮使用与表单其余部分相同的文本大小。
给表单字段和按钮设置 10 像素的内边距。
为按钮提供紫色背景，白色前景，无边框和 5px 的圆角。

A single line form

尝试更改下面的实时代码以重新创建图像中显示的示例：

htmlCopyPlay

<form action="" class="my-form" method="post">
  <div>
    <label for="fldSearch">Keywords</label>
    <input id="fldSearch" name="keywords" type="search" />
    <input name="btnSubmit" type="submit" value="Search" />
  </div>
</form>

cssCopyPlay

body {
  font: 1.2em / 1.5 sans-serif;
}
.my-form {
  border: 2px solid #000;
  padding: 5px;
}

Play

Click here to show the solution

Here's an example solution for the task:

Help improve MDN

Was this page helpful to you?

YesNo

Learn how to contribute

This page was last modified on 2025年4月27日 by MDN contributors.

View this page on GitHub • Report a problem with this content

Filter sidebar

Your blueprint for a better internet.

MDN

Contribute

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.

挑战：图片和表格元素

In this article

任务一

任务二

Help improve MDN